<template>
  <div class="main-box">
    <div class="header-box">
      <img
        src="https://img11.360buyimg.com/jdphoto/s120x120_jfs/t21160/90/706848746/2813/d1060df5/5b163ef9N4a3d7aa6.png"
        alt=""
      />
      <div class="user" v-if=" userList[0]">
        <p>昵称：{{ userList[0].nickname }}</p>
        <p>电话：{{ userList[0].tel }}</p>
      </div>
      <van-icon name="setting-o" />
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Icon } from "vant";
import { infoUser } from "../../apis/user";

Vue.use(Icon);
export default {
  name: "MineHeader",

  data() {
    return {
      userList: [],
    };
  },

  mounted() {},

  methods: {},
  created() {
    infoUser({ userid: localStorage.getItem("userid") }).then((data) => {
      this.userList = data.data.data;
      // console.log( data.data.data)
    });
  },
};
</script>

<style  scoped>
.main-box {
  min-height: 1.2rem;
  background: url(https://img12.360buyimg.com/img/s750x432_jfs/t1/84804/29/26776/112106/624d07d0E55603649/07ed8923a7bdbad2.png);
  padding: 0.2rem;
  position: relative;
}
.header-box {
  height: 0.5rem;
  width: 100%;
  display: flex;
}
.header-box img {
  margin-right: 0.1rem;
  height: 100%;
}
.header-box :nth-of-type(1) {
  font-weight: 400;
  font-size: 0.2rem;
  margin-top: 0.05rem;
}
.header-box :nth-of-type(2) {
  font-weight: 400;
  font-size: 0.18rem;
  margin-top: 0.05rem;
  display: block;
}
.user {
  display: flex;
  flex-direction: column;
}
::v-deep .van-icon {
  position: absolute;
  bottom: 0.15rem;
  right: 0.3rem;
  color: #999;
  font-size: 0.25rem;
}
</style>